<!DOCTYPE html>
<!--Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Document</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>
</head>
<body>
	<H1>欢迎来到首页！！！</H1>
	<br>
	<form class="form-horizontal" role="form"
		style="width: 50%; height: 50%; float: right;">
		<div class="form-group">
			<label for="name" class="col-sm-2 control-label">用户名</label>
			<div class="col-sm-10">
				<input type="text" class="form-control input-xlarge" id="name"
					style="width: 30%" placeholder="请输入名字">
			</div>
		</div>
		<div class="form-group">
			<label for="password" class="col-sm-2 control-label">密码</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="password"
					style="width: 30%" placeholder="请输入密码">
			</div>
		</div>
		<div class="form-group">
			<label for="code" class="col-sm-2 control-label">验证码</label>
			<div class="col-sm-10">
				<input type="text" class="form-control form-inline" id="code" style="width: 30%"
					placeholder="请输入验证码"> <button type="button"  class="btn btn-default" id="getCode" >获取验证码</button>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="button"  class="btn btn-default" id="login">登录</button>
			</div>
		</div>
	</form>
</body>
<script type="text/javascript">
	$(function() {
		 $('#login').click(function () {

		 });

		 $.ajax({
			  	type:"GET",
	            url:"http://localhost:9084/getPulbicKey",
	            dataType:"json",
	            success:function(data){
	             console.log("publicKey: " + data);
	             var encrypt = new JSEncrypt();
	       		 encrypt.setPublicKey(data);
	       		 var encryptData = encrypt.encrypt("嘿嘿1234566");//加密后的字符串 JSON
	       		 console.log("加密后: " + encryptData)
		       		 $.ajax({
		       			  	type:"GET",
		       	            url:"http://localhost:9084/decrypt",
		       	            dataType:"json",
		       	            data:{"encrypt":encryptData},
		       	            success:function(data){
		       	                console.log("decrypt后: " + data);
								console.log("decrypt后: " + data.data);
								console.log("decrypt后: " + data.data);
		       	            },
		       	            error:function(data){
		       	                console.log("error: "+data);
		       	            }
		       		 });
	            },
	            error:function(data){
	                console.log("error: "+data);
	            }
		 });
	})
</script>
</html>
